/**
 * Created by Administrator on 2017/3/14.
 */
var Step1 = require('./steps/step-1');
var Result = require('../complex/confirmResult');
var Layer = require('../../../src/libs/layer');
var Root = React.createClass({
    getDefaultProps:function(){
        return{
            result:PageDM.resultDate,
            gatewayPayResult: PageDM.gatewayResult.value
        }
    },
    componentDidMount: function(){
        var _this = this;
        this.refs.step2.style.display = 'none';

        UEventHub.on('showResult',function (bool,result) {
            if(bool){
                _this.refs.step1.style.display = "none";
                _this.refs.step2.style.display = "block";
                PageDM.resultDate.setValue(result);
            }else{
                _this.refs.step1.style.display = "block";
                _this.refs.step2.style.display = "none";
            }
        });
        UEventHub.on('gatewayPay',function (result) {
            console.log(result)
            _this.refs.gatewayPayFormBox.innerHTML = result.formHtml;
            document.getElementById(result.formId).submit();
            _this.refs[PageDM.gatewayLayer.dmbind].layerOpen();
            _this.refs.orderAgain.href = result.reOrderUrl;
            _this.refs.finishGatewayPay.onclick = result.checkPay;
        });
        UEventHub.on(PageDM.gatewayResult.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.gatewayPayMsg.innerHTML = v.msg;
        });
        //URL
        UEventHub.on(PageDM.URL.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            var checkRef = _this.refs.stepWrap.getRefs('checkWrap');
            checkRef.setState({
                url:v
            })
        });

        UEventHub.emit("pageLoad","hello world!");
        UEventHub.on('LayerOpen',function (v) {
            _this.refs[v].layerOpen();

        });
        UEventHub.on('LayerClose',function (v) {
            _this.refs[v].layerClose();
        });
    },
    render: function () {
        var PageDM = window.PageDM;

        return (
            <div>
                <div className="container" ref="container">
                    <div ref="step1"><Step1 ref="stepWrap"/></div>
                    <div ref="step2"><Result data={this.props.result} url={PageDM.URL.value}/></div>
                </div>
                <Layer ref={PageDM.gatewayLayer.dmbind} className="gatewayPayLayer" title="<h4 class='gatewayTitle'>温馨提示</h4>" width="650px" height="230px" showClose={false} closeBack={PageDM.gatewayLayer.closeBack}>
                    <p className="gatewayPayLayerText">请到新打开的网银页面进行支付，若发生支付失败请重新下单</p>
                    <p className="gatewayPayLayerBtn">
                        <a ref="finishGatewayPay" className="finishGatewayPay" href="javascript: void(0)">已完成支付</a>
                        <a ref="orderAgain" className="orderAgain" href="javascript: void(0)">重新下单</a>
                    </p>
                    <p className="gatewayPayMsg" ref="gatewayPayMsg"></p>
                </Layer>
                <div ref="gatewayPayFormBox"></div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));